<template>
  <div class="main_wrapper">

    <div class="main_header">
      <span><img src="../assets/logo.png" alt=""></span>
      <span><em @click="test">{{username}}</em><em @click="exitModal=true">退出</em></span>
    </div>

    <Modal
      width="20"
      v-model="exitModal"
      @on-ok="logout">
      <p style="font-size: 20px;margin: 20px 0;">确定退出登陆？</p>
    </Modal>

    <!--<Modal v-model="visible">-->
    <!--<img :src="imgName" v-if="visible" style="width: 100%">-->
    <!--</Modal>-->

    <Row style="position:absolute;width: 100%;top: 60px;bottom: 0;">
      <Col span="8" class="main_left_menu">
        <Menu theme="dark" @on-select="selectInfo" :active-name="activeName" ref="mainMenu">
          <!--<router-link to="/main/screening">-->
          <MenuItem name="1" to="/main/screening">
            信息录入
          </MenuItem>
          <!--</router-link>-->
          <!--<router-link to="/main/result">-->
          <MenuItem name="2" to="/main/result">
            信息检索
          </MenuItem>
          <!--</router-link>-->
          <!--<MenuItem name="2">-->
          <!--糖网病检测-->
          <!--</MenuItem>-->
          <!--<MenuItem name="3">-->
          <!--青光眼检测-->
          <!--</MenuItem>-->
          <!--<MenuItem name="4">-->
          <!--老年性黄斑病变-->
          <!--</MenuItem>-->
          <!--<Submenu name="5">-->
          <!--<template slot="title">-->
          <!--信息检索-->
          <!--</template>-->
          <!--<MenuItem name="5-1">Option 5-1</MenuItem>-->
          <!--<MenuItem name="5-2">Option 5-2</MenuItem>-->
          <!--</Submenu>-->
          <!--<Submenu name="6">-->
            <!--<template slot="title">-->
              <!--统计与分析-->
            <!--</template>-->
            <!--<MenuItem name="6-1">Option 6-1</MenuItem>-->
            <!--<MenuItem name="6-2">Option 6-2</MenuItem>-->
          <!--</Submenu>-->
          <!--<Submenu name="7">-->
            <!--<template slot="title">-->
              <!--眼科知识-->
            <!--</template>-->
            <!--<MenuItem name="7-1">Option 7-1</MenuItem>-->
            <!--<MenuItem name="7-2">Option 7-2</MenuItem>-->
            <!--<MenuItem name="7-3">Option 7-3</MenuItem>-->
            <!--<MenuItem name="7-4">Option 7-4</MenuItem>-->
            <!--<MenuItem name="7-5">Option 7-5</MenuItem>-->
          <!--</Submenu>-->
        </Menu>
      </Col>
      <router-view></router-view>

      <!--<Col span="16" class="main_right_items" v-if="showItem==1">-->
      <!--<Scroll class="main_items_scroll" :height="clientHeight">-->

      <!--<div>-->
      <!--<div class="main_item">-->
      <!--<p>-->
      <!--<span>姓&emsp;&emsp;名：<input type="text" v-model="name"></span>-->
      <!--<span>性&emsp;&emsp;别：<input type="text" v-model="gender"></span>-->
      <!--<span>出生日期：<input type="text" v-model="birthDate"></span>-->
      <!--</p>-->
      <!--<p>-->
      <!--<span>籍&emsp;&emsp;贯：<input type="text" v-model="birthPlace"></span>-->
      <!--<span>身份证号：<input type="text" v-model="cardNum"></span>-->
      <!--<span>手&nbsp;&nbsp;机&nbsp;&nbsp;号：<input type="text" v-model="telephone"></span>-->
      <!--</p>-->
      <!--<p>-->
      <!--<span>年&emsp;&emsp;龄：<input type="text" v-model="age"></span>-->
      <!--<span>家族病史：<input type="text" v-model="history"></span>-->
      <!--&lt;!&ndash;<span>性别：<input type="text"></span>&ndash;&gt;-->
      <!--&lt;!&ndash;<span>出生日期：<input type="text"></span>&ndash;&gt;-->
      <!--</p>-->

      <!--<div class="demo-upload-list" v-for="item in leftImg">-->
      <!--<template v-if="item.status === 'finished'">-->
      <!--<img :src="item.url">-->
      <!--<div class="demo-upload-list-cover">-->
      <!--<Icon type="ios-eye-outline" size="50" @click.native="handleView(item)"></Icon>-->
      <!--<Icon type="ios-trash-outline" size="50" @click.native="handleRemove(0,item)"></Icon>-->
      <!--</div>-->
      <!--</template>-->
      <!--<template v-else>-->
      <!--<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>-->
      <!--</template>-->
      <!--</div>-->
      <!--<Upload-->
      <!--ref="upload"-->
      <!--:show-upload-list="false"-->
      <!--:default-file-list="defaultList"-->
      <!--:on-success="handleSuccess"-->
      <!--:format="['jpg','jpeg','png']"-->
      <!--:max-size="20480"-->
      <!--:on-format-error="handleFormatError"-->
      <!--:on-exceeded-size="handleMaxSize"-->
      <!--:before-upload="handleBeforeUpload"-->
      <!--type="drag"-->
      <!--:multiple="false"-->
      <!--action="http://localhost:3001/upload"-->
      <!--:headers="headers"-->
      <!--style="display: inline-block;width:58px;">-->
      <!--<div style="width: 58px;height:58px;line-height: 58px;">-->
      <!--<p style="margin: 0;height: 10px;">左眼</p>-->
      <!--<Icon type="ios-camera" size="20"></Icon>-->
      <!--</div>-->
      <!--</Upload>-->


      <!--<div class="demo-upload-list" v-for="item in rightImg">-->
      <!--<template v-if="item.status === 'finished'">-->
      <!--<img :src="item.url">-->
      <!--<div class="demo-upload-list-cover">-->
      <!--<Icon type="ios-eye-outline" size="50" @click.native="handleView(item)"></Icon>-->
      <!--<Icon type="ios-trash-outline" size="50" @click.native="handleRemove(1,item)"></Icon>-->
      <!--</div>-->
      <!--</template>-->
      <!--<template v-else>-->
      <!--<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>-->
      <!--</template>-->
      <!--</div>-->
      <!--<Upload-->
      <!--ref="upload2"-->
      <!--:show-upload-list="false"-->
      <!--:default-file-list="defaultList"-->
      <!--:on-success="handleSuccess"-->
      <!--:format="['jpg','jpeg','png']"-->
      <!--:max-size="20480"-->
      <!--:on-format-error="handleFormatError"-->
      <!--:on-exceeded-size="handleMaxSize"-->
      <!--:before-upload="handleBeforeUpload2"-->
      <!--type="drag"-->
      <!--:multiple="false"-->
      <!--action="http://localhost:3001/upload"-->
      <!--:headers="headers"-->
      <!--style="display: inline-block;width:58px;">-->
      <!--<div style="width: 58px;height:58px;line-height: 58px;">-->
      <!--<p style="margin: 0;height: 10px;">右眼</p>-->
      <!--<Icon type="ios-camera" size="20"></Icon>-->
      <!--</div>-->
      <!--</Upload>-->
      <!--</div>-->

      <!--<p class="test_item">-->
      <!--<span class="item">-->
      <!--<span>糖网病检测</span>-->
      <!--<Select v-model="sugarModel" multiple style="width:200px" @on-change="getSugarItem">-->
      <!--<Option v-for="item in sugarTest" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
      <!--</Select>-->
      <!--</span>-->
      <!--<span class="item">-->
      <!--<span>青光眼检测</span>-->
      <!--<Select v-model="eyeModel" multiple style="width:200px">-->
      <!--<Option v-for="item in eyeTest" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
      <!--</Select>-->
      <!--</span>-->
      <!--<span class="item">-->
      <!--<Checkbox v-model="spotDisease">老年性黄斑病变</Checkbox>-->
      <!--</span>-->
      <!--</p>-->
      <!--</div>-->

      <!--<div class="submit">-->
      <!--<Button type="primary" @click="submit">筛查</Button>-->
      <!--</div>-->

      <!--&lt;!&ndash;<div>糖网病检测</div>&ndash;&gt;-->
      <!--&lt;!&ndash;<div>青光眼检测</div>&ndash;&gt;-->
      <!--&lt;!&ndash;<div>老年性黄斑病变</div>&ndash;&gt;-->
      <!--&lt;!&ndash;<div>信息检索</div>&ndash;&gt;-->
      <!--&lt;!&ndash;<div>统计与分析</div>&ndash;&gt;-->
      <!--&lt;!&ndash;<div>眼科知识</div>&ndash;&gt;-->
      <!--</Scroll>-->

      <!--</Col>-->

      <!--<Col span="16" v-if="showItem==2" class="main_right_items" style="padding: 0">-->
      <!--<Scroll class="main_items_scroll" :height="clientHeight">-->
      <!--<div class="result_search">-->
      <!--<span class="item">身份证号 <input type="text"></span>-->
      <!--<span class="item">时间 <input type="text"></span>-->
      <!--<span class="item">种类-->
      <!--<Select v-model="screeningModel" multiple style="width:200px">-->
      <!--<Option v-for="item in screeningItems" :value="item.value" :key="item.value">{{ item.label }}</Option>-->
      <!--</Select>-->
      <!--</span>-->
      <!--<Button type="primary" @click="search">查询</Button>-->
      <!--</div>-->
      <!--<div class="result_list_title">-->
      <!--<span style="flex: 1;">病历号</span>-->
      <!--<span style="flex: 1;">图像</span>-->
      <!--<span style="flex: 1;">姓名</span>-->
      <!--<span style="flex: 2;">身份证号</span>-->
      <!--<span style="flex: 1;">模式</span>-->
      <!--<span style="flex: 2;">时间</span>-->
      <!--<span style="flex: 1;">查看</span>-->
      <!--</div>-->

      <!--<div class="result_list_item" v-for="item in result">-->
      <!--<span style="flex: 1;">{{item.id}}</span>-->
      <!--<span style="flex: 1;" @click="handleView(item)" class="result_detail"><img :src="item.url" alt=""-->
      <!--style="width: 80px;"></span>-->
      <!--<span style="flex: 1;">{{item.owner}}</span>-->
      <!--<span style="flex: 2;">{{item.number}}</span>-->
      <!--<span style="flex: 1;">{{item.type==0?'左眼':'右眼'}}</span>-->
      <!--<span style="flex: 2;">{{item.time}}</span>-->
      <!--<span style="flex: 1;" class="result_detail">详情</span>-->
      <!--</div>-->
      <!--</Scroll>-->
      <!--</Col>-->
    </Row>
  </div>
</template>

<script>
  // import {apiPre} from '../js/config';
  // import axios from 'axios';

  export default {
    name: "mainPage",
    data() {
      return {
        // clientHeight: 0,
        // clientHeight2: 0,
        // name: '',
        // gender: '',
        // birthDate: '',
        // birthPlace: '',
        // cardNum: '',
        // telephone: '',
        // age: '',
        // history: '',
        // defaultList: [],
        // imgName: '',
        // visible: false,
        // leftImg: [],
        // rightImg: [],
        // sugarTest: [
        //   {
        //     value: '00',
        //     label: '眼底视网膜血管分割'
        //   },
        //   {
        //     value: '01',
        //     label: '微动脉瘤检测'
        //   }
        // ],
        // sugarModel: [],
        // eyeTest: [
        //   {
        //     value: '10',
        //     label: '视盘视杯定位'
        //   },
        //   {
        //     value: '11',
        //     label: '视盘视杯分割'
        //   },
        //   {
        //     value: '12',
        //     label: '杯盘比计算(CDR)'
        //   }
        // ],
        // eyeModel: [],
        // spotDisease: false,
        // headers: {
        //   token: window.localStorage.getItem('screeningLogin')
        // },
        username: '',
        exitModal: false,
        activeName: '1'
        // showItem: 1,
        // result: [],
        // screeningItems: [
        //   {
        //     value: '00',
        //     label: '眼底视网膜血管分割'
        //   },
        //   {
        //     value: '01',
        //     label: '微动脉瘤检测'
        //   },
        //   {
        //     value: '10',
        //     label: '视盘视杯定位'
        //   },
        //   {
        //     value: '11',
        //     label: '视盘视杯分割'
        //   },
        //   {
        //     value: '12',
        //     label: '杯盘比计算(CDR)'
        //   }
        // ],
        // screeningModel: []
      }
    },
    methods: {
      selectInfo(name) {
        console.log(name);
        // this.showItem = name;
        // if (name == 2) {
        //   axios.get(apiPre + 'result').then((res) => {
        //     console.log('result res', res.data.data);
        //     this.result = res.data.data;
        //   }).catch((err) => {
        //     console.log(err);
        //   })
        // }
      },

      // handleView(item) {
      //   this.imgName = item.url;
      //   this.visible = true;
      // },
      // handleRemove(num, file) {
      //   if (num == 0) {
      //     const fileList = this.$refs.upload.fileList;
      //     this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
      //   } else {
      //     const fileList = this.$refs.upload2.fileList;
      //     this.$refs.upload2.fileList.splice(fileList.indexOf(file), 1);
      //   }
      // },
      // handleSuccess(res, file) {
      //   file.url = res;
      //   file.name = res;
      // },
      // handleFormatError(file) {
      //   this.$Notice.warning({
      //     title: 'The file format is incorrect',
      //     desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
      //   });
      // },
      // handleMaxSize(file) {
      //   this.$Notice.warning({
      //     title: 'Exceeding file size limit',
      //     desc: 'File  ' + file.name + ' is too large, no more than 2M.'
      //   });
      // },
      // handleBeforeUpload() {
      //   const check = this.leftImg.length < 1;
      //   if (!check) {
      //     this.$Notice.warning({
      //       title: '只能上传1张图片,可删掉重新上传.'
      //     });
      //   }
      //   return check;
      // },
      // handleBeforeUpload2() {
      //   const check = this.rightImg.length < 1;
      //   if (!check) {
      //     this.$Notice.warning({
      //       title: '只能上传1张图片,可删掉重新上传.'
      //     });
      //   }
      //   return check;
      // },
      // getSugarItem(obj) {
      //
      // },
      // submit() {
      //   console.log(this.leftImg);
      //   var data = [
      //     this.leftImg.length > 0 ? {
      //       src: this.leftImg[0].url,
      //       type: 0
      //     } : '',
      //     this.rightImg.length > 0 ? {
      //       src: this.rightImg[0].url,
      //       type: 1
      //     } : ''
      //   ]
      //   for (var i = 0; i < data.length; i++) {
      //     if (!data[i]) {
      //       data.splice(i, 1);
      //       i--;
      //     }
      //   }
      //   console.log(data.length);
      //   axios.post(apiPre + 'screeningNew',
      //     {
      //       name: this.name,
      //       gender: this.gender,
      //       age: this.age,
      //       birthDate: this.birthDate,
      //       birthPlace: this.birthPlace,
      //       cardNum: this.cardNum,
      //       telephone: this.telephone,
      //       history: this.history,
      //       leftImg: this.leftImg.length > 0 ? 0 : 1,
      //       rightImg: this.rightImg.length > 0 ? 1 : 0,
      //       sugarModel: this.sugarModel,
      //       eyeModel: this.eyeModel,
      //       spotDisease: this.spotDisease,
      //       image: data
      //     }, {
      //       // headers: {
      //       //   token: window.localStorage.getItem('screeningLogin')
      //       // }
      //     }).then((res) => {
      //     console.log(res)
      //   }).catch((err) => {
      //     console.log(err)
      //   })
      //   console.log(this.leftImg.length);
      // },
      logout() {
        window.localStorage.removeItem('screeningLogin');
        this.$router.push('/login');
      },
      test() {
        axios.get(apiPre + 'test').then((res) => {
          console.log(res)
        }).catch((err) => {
          console.log(err);
        })
      },
      // search() {
      //
      // }
    },
    created() {
      // this.leftImg = this.$refs.upload.fileList;
      // this.rightImg = this.$refs.upload2.fileList;
      // this.clientHeight = document.documentElement.clientHeight - 60;
      // this.clientHeight2 = document.documentElement.clientHeight - 120;
      this.username = window.localStorage.getItem('user');
      console.log('this.$route', this.$route.name)
      if (this.$route.name == 'screening') {
        console.log('screening')
        this.activeName = '1';
        this.$nextTick(() => {
          console.log('screening', this.activeName);
          this.$refs.mainMenu.updateActiveName();
        })
      } else if (this.$route.name == 'result') {
        console.log('result');
        this.activeName = '2';
        this.$nextTick(() => {
          console.log('result', this.activeName);
          this.$refs.mainMenu.updateOpened();
          this.$refs.mainMenu.updateActiveName();
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .ivu-menu {
    /*width: auto !important;*/
  }

  /*.main_wrapper {*/
  /*!*position: absolute;*!*/
  /*!*height: 100%;*!*/
  /*!*width: 100%;*!*/
  /*}*/

  .main_left_menu {
    height: 100%;
    width: 240px;
    ul {
      height: 100%;
    }
  }

  /*.main_right_items {*/
  /*width: 80%;*/
  /*height: 100%;*/
  /*padding: 0 10px;*/
  /*}*/

  /*.main_item {*/
  /*p {*/
  /*margin: 20px 0;*/
  /*span {*/
  /*display: inline-block;*/
  /*width: 33%;*/
  /*}*/
  /*}*/
  /*}*/

  /*.test_item {*/
  /*margin-top: 20px;*/
  /*.item {*/
  /*display: inline-block;*/
  /*width: 30%;*/
  /*}*/
  /*}*/

  /*.submit {*/
  /*margin-top: 40px;*/
  /*text-align: center;*/
  /*button {*/
  /*width: 200px;*/
  /*}*/
  /*}*/

  /*.demo-upload-list {*/
  /*display: inline-block;*/
  /*width: 40%;*/
  /*!*height: 60px;*!*/
  /*text-align: center;*/
  /*line-height: 60px;*/
  /*border: 1px solid transparent;*/
  /*border-radius: 4px;*/
  /*overflow: hidden;*/
  /*background: #fff;*/
  /*position: relative;*/
  /*box-shadow: 0 1px 1px rgba(0, 0, 0, .2);*/
  /*margin-right: 4px;*/
  /*}*/

  /*.demo-upload-list img {*/
  /*width: 100%;*/
  /*height: 100%;*/
  /*}*/

  /*.demo-upload-list-cover {*/
  /*display: none;*/
  /*position: absolute;*/
  /*top: 0;*/
  /*bottom: 0;*/
  /*left: 0;*/
  /*right: 0;*/
  /*background: rgba(0, 0, 0, .6);*/
  /*}*/

  /*.demo-upload-list:hover .demo-upload-list-cover {*/
  /*display: block;*/
  /*}*/

  /*.demo-upload-list-cover i {*/
  /*color: #fff;*/
  /*font-size: 20px;*/
  /*cursor: pointer;*/
  /*margin: 0 2px;*/
  /*}*/

  /*.main_items_scroll {*/
  /*!*height: 1000px;*!*/
  /*position: relative;*/
  /*!*left: 20%;*!*/
  /*height: 100%;*/
  /*.ivu-scroll-container {*/
  /*!*height: 100%;*!*/
  /*position: absolute;*/
  /*}*/
  /*}*/

  .main_header {
    height: 60px;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      width: 50px;
      vertical-align: middle
    }
    em {
      font-style: normal;
      font-size: 18px;
      margin: 0 20px;
    }
    em:hover {
      text-decoration: underline;
    }
  }

  /*.result_list_title {*/
  /*background-color: rgb(41, 47, 62);*/
  /*height: 30px;*/
  /*display: flex;*/
  /*justify-content: space-around;*/
  /*align-items: center;*/
  /*font-size: 18px;*/
  /*color: #fff;*/
  /*span {*/
  /*text-align: center;*/
  /*}*/
  /*}*/

  /*.result_list_item {*/
  /*background-color: rgba(64, 71, 91, 0.5);*/
  /*display: flex;*/
  /*justify-content: space-around;*/
  /*align-items: center;*/
  /*font-size: 16px;*/
  /*color: #fff;*/
  /*border-bottom: 1px solid #fff;*/
  /*padding-top: 5px;*/
  /*span {*/
  /*text-align: center;*/
  /*}*/
  /*}*/

  /*.result_detail:hover {*/
  /*text-decoration: underline;*/
  /*cursor: pointer;*/
  /*}*/

  /*.result_search {*/
  /*padding: 5px 10px;*/
  /*.item {*/
  /*margin-right: 20px;*/
  /*}*/
  /*Button {*/
  /*float: right;*/
  /*}*/
  /*}*/
</style>
